<template>
    <div :style="{ width: '100%', height: '100%', display: 'flex' }">
        <div id="sider">
            <div class="title">
                <headerInfo></headerInfo>
            </div>

            <div>
                <a-radio-group v-model:value="radioData">
                    <a-radio-button style="width: 200px;text-align: center;" value="huihua">会话</a-radio-button>
                    <a-radio-button style="width:200px;text-align: center;" value="blackList">黑名单</a-radio-button>
                </a-radio-group>
            </div>

            <div v-show="radioData == 'huihua'">
                <div class="huihuaList" v-if="huihuaData.latestData">
                    <a-input v-model:value="tjData" placeholder="输入名称进行搜索" />
                    <div class="huihua-box"
                        v-for="item in huihuaData.latestData.slice().filter(i => i.conversationId.includes(tjData))"
                        :key="item" @click="showHui(item.conversationId)">
                        <img src="../static/images/theme22x.png" alt="">
                        <div style="flex: 1;">
                            <div class="huihua-title">
                                <div class="name">{{ item.conversationId }}</div>
                                <div class="date">{{ dateJS(item.lastMessage.time) }}</div>
                            </div>
                            <div class="nei" v-if="item.lastMessage.type == 'txt'">
                                <template v-for="it in textToImg(item.lastMessage.msg)">
                                    <span v-if="it.type == 'text'">{{ it.content }}</span>
                                    <img v-if="it.type == 'img'" :src="it.path">
                                </template>
                            </div>
                            <div class="nei" v-else>[图片]</div>
                            <a-badge class="hz" :count="item.unReadCount" />
                        </div>
                    </div>
                </div>
                <a-empty style="margin-top: 50px;" v-else />
            </div>
            <div v-show="radioData == 'blackList'">
                <div class="huihuaList" v-if="huihuaData.latestData" >
                    <a-input v-model:value="tjData" placeholder="输入名称进行黑名单搜索" />
                    <div class="huihua-box"
                        v-for="item in huihuaData.latestData.slice().filter(i => i.conversationId.includes(tjData))"
                        :key="item" @click="showHui(item.conversationId)">
                        <img src="../static/images/theme22x.png" alt="">
                        <div style="flex: 1;">
                            <div class="huihua-title">
                                <div class="name">{{ item.conversationId }}</div>
                                <div class="date">{{ dateJS(item.lastMessage.time) }}</div>
                            </div>
                            <div class="nei" v-if="item.lastMessage.type == 'txt'">
                                <template v-for="it in textToImg(item.lastMessage.msg)">
                                    <span v-if="it.type == 'text'">{{ it.content }}</span>
                                    <img v-if="it.type == 'img'" :src="it.path">
                                </template>
                            </div>
                            <div class="nei" v-else>[图片]</div>
                            <a-badge class="hz" :count="item.unReadCount" />
                        </div>
                    </div>
                </div>
                <a-empty style="margin-top: 50px;" v-else />
            </div>
            <div class="pages">
                <a-button type="primary" v-show="huihuaData.pageId && huihuaData.pageList.indexOf(huihuaData.pageId)>0">首页</a-button>
                <a-button type="primary" v-show="huihuaData.pageId && huihuaData.pageList.indexOf(huihuaData.pageId)>0" >上一页</a-button>
                <a-button type="primary" v-show="huihuaData.cursor" @click="nextPage">下一页</a-button>
            </div>
        </div>
        <div style="flex: 1;height: 100%;overflow: hidden;">
            <chat :id="chatId"></chat>
        </div>
    </div>
</template>

<script setup>
import headerInfo from './header.vue';
import conn from '../config/config'
import { onMounted, ref, onUnmounted } from 'vue';
import { useHuihua } from '../store/huihua';
import dateJS from '../com/date'
import { textToImg, EMOJI } from '../com/bioaqing'
import chat from './chat.vue'
import { useAdmin } from '../store/userInfo'
import getData from '../com/com';
const {getPageUser} =getData()
const huihuaData = useHuihua();
const admins = useAdmin();
const chatId = ref('');
const showHui = (uid) => {
    chatId.value = uid;
}

const tjData = ref('')

const radioData = ref('huihua')
onMounted(() => {
    conn
        .open({
            user: admins.userinfo.username,
            pwd: admins.userinfo.password,
        })
        .then(() => {
            console.log("login success");

        })
        .catch((reason) => {
            console.log("login fail", reason);
        });

})

const nextPage = ()=>{
    if(huihuaData.cursor){
        getPageUser(huihuaData.cursor)
    }
}

onUnmounted(() => {
    conn.close();
})
</script>
<style lang="scss">
#sider {
    display: flex;
    height: 100%;
    width: 400px;
    flex-direction: column;
    background-color: #eaeff9;

    .title {
        height: 10%;
        width: 100%;
        background-color: #f8f8f8;
    }

    .huihuaList {
        width: 100%;
        height: 880px;
        background-color: #eaeff9;
        /* 隐藏滚动条在Microsoft Edge中 */
        .huihua-box {
            height: 80px;
            width: 100%;
            margin-bottom: 3px;
            background-color: #f0f0f0;
            padding: 10px 30px 0 14px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;

            &:hover {
                background-color: #e5e5e5;
                cursor: pointer;
            }

            >img {
                height: 35px;
                width: 35px;
                margin-right: 10px;
            }

            .huihua-title {
                display: flex;
                justify-content: space-between;
                height: 15px;
                margin-top: -10px;
                width: 100%;

                .name {
                    width: 70%;
                    font-size: 15px;
                    color: #000;
                }

                .date {
                    flex: 1;
                    font-size: 15px;
                    color: #666;
                }
            }

            .nei {
                font-size: 12px;
                margin-top: 10px;
                color: #666;
                width: 230px;
                white-space: nowrap;
                /* 禁用换行 */
                overflow: hidden;
                /* 隐藏溢出部分 */
                text-overflow: ellipsis;

                /* 使用省略号(...)显示溢出部分 */
                img {
                    width: 20px;
                    height: 20px;
                }

            }

            .hz {
                position: absolute;
                bottom: 10px;
                right: 10px;
            }

        }
    }

    .pages{
        display: flex;
        justify-content:space-around;
    }

}
</style>